{% extends "admin_base.html" %}
{% load filters %}
{% block pageContent %}
    <table>
    <form enctype="multipart/form-data" method="POST">
        {{ form.as_table }}
    </table>
    <br />
    <strong>Cluster Items</strong>
        <div id="cluster_items">
            {% if cluster_items|length %}
            {% for item in cluster_items %}
            <div class="object">
                <div class="object_actions">
                    <a href="javascript:deleteObject('{{ item.get_absolute_url }}');" title="Delete Item" alt="Delete Item">
                        <img src="{% url ol-root %}styles/admin/images/delete.png" />
                    </a>
                </div>
                <div class="clusterItem">{{ item }}</div>
            </div>
            {% endfor %}
            {% endif %}
        </div>
    <table>
    <tr>
        <td>&nbsp;</td>
        <td>
            {% ifequal action "update" %}
            <input id="submitButton" type="submit" value="Update" />
            {% else %}
            <input id="submitButton" type="submit" value="Create" />
            {% endifequal %}
            <input id="cancelButton" type="button" value="Cancel" onclick="history.back();" />
        </td>
    </tr>
    </form>
    </table>
    <hr />
    <table>
    <tr>
        <form enctype="multipart/form-data" method="POST">
        <td colspan="2"><strong>Add an element</strong><br />
            {% if elements|length %}
            <select name="element">
                {% for element in elements %}
                <option value="{{ element|className }}:{{ element.id }}">{{ element }}</option>
                {% endfor %}
            </select>
            <select name="element_trigger">
                {% for trigger in trigger_types %}
                <option value="{{ trigger.0 }}">{{ trigger.1 }}</option>
                {% endfor %}
            </select>
            <input id="add_element" type="submit" value="Add Element" />
            {% else %}
            There are no elements defined for this labyrinth.
            {% endif %}
        </td>
        </form>
    </tr>
    <tr>
        <form enctype="multipart/form-data" method="POST">
        <td colspan="2"><strong>Add an asset</strong><br />
            {% if assets|length %}
            <select name="asset">
                {% for asset in assets %}
                <option value="{{ asset.id }}">{{ asset }}</option>
                {% endfor %}
            </select>
            <input id="add_asset" type="submit" value="Add Asset" />
            {% else %}
            There are no assets defined for this labyrinth.
            {% endif %}
        </td>
        </form>
    </tr>
    <tr>
        <form enctype="multipart/form-data" method="POST">
        <td colspan="2"><strong>Add a cluster</strong><br />
            {% if clusters|length %}
            <select name="cluster">
                {% for cluster in clusters %}
                <option value="{{ cluster.id }}">{{ cluster }}</option>
                {% endfor %}
            </select>
            <input id="add_cluster" type="submit" value="Add Cluster" />
            {% else %}
            There are no clusters defined for this labyrinth.
            {% endif %}
        </td>
        </form>
    </tr>
    </table>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#cluster_items").sortable().disableSelection();
        });
        
        $('#cluster_items').bind('sortupdate', function(event, ui) {
            var itemIDs = '';
            $('div#cluster_items div.clusterItem').contents().each(function(index, textNode) {
                if (itemIDs != '')
                    itemIDs += ',';
                itemIDs += textNode.textContent.match('[0-9]+$')[0];
            });
            $('#id_items').val(itemIDs);
        });
    </script>
{% endblock %}